import React, { Component } from 'react';
import './5css.css'
import Header from '../../components/comment/header'
import List from '../../components/comment/list'
class CompComment extends Component {
    state = { 
        title:'',
        content:'',
        list:[
            {
                title:'评论人 : rose',
                content:'评论内客: 楼主好人'
            }
        ]
     } 

    CommentList = (e) => {
        let list = this.state.list.concat([e])
        this.setState({
          list,
        })
      }
      del=(index)=>{
        this.state.list.splice(index,1)
        this.setState({
            list:this.state.list
        })
     }
    render() { 
        return (<>
            <h2>5.案例-发表评论</h2>
            <div className='comment'>
                <Header CommentList={this.CommentList}/> 
                <div className='list'>
                    <ul>
                        {
                            this.state.list.map((item,index)=><li key={index}>
                                 <h3>{item.title}</h3>
                                <p>{item.content}</p>
                                <button onClick={()=>this.del(index)}>删除评论</button>
                            </li>)
                        }
           
                       
                    </ul>
                </div>
            </div>
        </>);
    }
}
 
export default CompComment;